接下來我希望行程及票卷都有rating的欄位，

然後我們可以做一個Rating的元件，用來顯示它們的熱門程度。

而這個元件，他會分別被行程及票卷這二個模組所使用

於是我想做一個獨立的模組叫做CoreModule,

裡面用來放置可以重覆Reuse的共用元件。

未來再切換其他專案時，

也只要拷貝這個CoreModule就能得到已經做好的元件。

制作RatingComponent，並放置於CoreModule

建立CoreModule

利用AngularDoc Extension右鍵選單ng g module

幫我們快速產生CoreModule相關程式碼架構

建立RatingComponent

再來在core目錄上使用右鍵選單ng g component

產生RatingComponent，使用這個方式產生元件

元件會被自動的加入到CoreModule的設定中

RatingComponent會被TicketModule及TourModule使用

所以我們必須還要在exports區塊，加上RatingComponent做導出

接下來製作內容

in rating.component.html

<span *ngFor="let item of ratingRange; let index = index">
  <i>{{item > rating ? emptyIcon : fullIcon}}</i>
</span>

in rating.component.ts

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-rating',
  templateUrl: './rating.component.html',
  styleUrls: ['./rating.component.scss']
})
export class RatingComponent implements OnInit {

  @Input()
  fullIcon = '★';

  @Input()
  emptyIcon = '☆';

  @Input()
  set max(max: number) {
      this._max = max;
      this.buildRanges();
  }

  get max() {
      return this._max;
  }

  @Input()
  rating: number;

  ratingRange: number[];

  private _max: number = 5;

  constructor() { }

  ngOnInit() {
  }

  private buildRanges() {
    this.ratingRange = this.range(1, this.max);
  }

  private range(start: number, end: number) {
      const foo: number[] = [];
      for (let i = start; i <= end; i++) {
          foo.push(i);
      }
      return foo;
  }

}

使用做好的RatingComponent在頁面上

首先在TourModule中，import CoreModule

// in tour.module.ts
...
import { CoreModule } from './../core/core.module';

@NgModule({
  imports: [
    CommonModule,
    CoreModule,
    RouterModule.forChild([
      { path: 'tour-list', component: TourListComponent }
    ])
  ],
  ...
})
export class TourModule { }

然後在tour.compoent.html加入來使用此元件

<app-rating [rating]="tour.rating" [max]="5"></app-rating>

同樣的做法，在TicketModule中，import CoreModule

...
import { CoreModule } from '../core/core.module';

@NgModule({
  imports: [
    CommonModule,
    CoreModule,
    RouterModule.forChild([
      { path: 'ticket-list', component: TicketListComponent }
    ])
  ],
  ...
})
export class TicketModule { }

也在ticket.compoent.html加入來使用此元件

<app-rating [rating]="ticket.rating" [max]="5"></app-rating>

執行專案，大功告成。

未來在做其他專案時也能沒有負擔的把這個模組拷貝至給其他專案的模組使用

因為它不包含特定Domain的邏輯，可以輕易做到reuse。

提供今天的Github專案進度檔案

還有API的專案更新